@import "../../../styles/index.less";

.link {
  color: #1585cf;
}

.section {
  border-top: 1px solid var(--border);
  .margin-bottom(2);
  &:first-child {
    border-top: none;
  }
  h2 {
    .margin-top(2);
  }
  [data-type="bool"] {
    width: 100% !important;
  }
}

.section-without-title {
  padding-top: 16px;
}

.page {
  .absolute(0,0,0,0);
}

.settings-container {
  width: 100%;
  height: 650px;
  position: relative;
  left: 16px;
  padding-right: 16px;
}

// window should have less height if only one platform is linked
.settings-container-one-platform {
  height: 550px;
}

.mode-toggle {
  display: flex;
  margin-top: 6px;
  margin-right: 8px;

  [data-type="toggle"] {
    margin-top: 2px;
    margin-left: 8px;
  }
}

.add-destination-btn {
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: 4px;
  line-height: 58px;
  display: block;
  text-align: center;
  position: relative;
  &:hover {
    border-color: (var(--button));
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.1) inset;
  }
  i {
    position: absolute;
    left: 19px;
    top: 17px;
    font-size: 24px !important;
    opacity: 0.6;
  }
}

.right-text {
  .margin-top(4);
  text-align: right;
}

.go-live-button {
  .margin-left(5);
}

.cancel-button, .go-live-button {
  z-index: 1;
}

.copy-links-buttons {
  text-align: right;
  a {
    margin-left: 16px;
  }
}

.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.links-container {
  width: 750px;
  background-color: var(--section-alt) !important;
  span {
    display: inline-block;
  }
  button {
    margin-left: 16px;
  }
  input {
    width: 380px;
  }
}

.stream-links {
  td {
    text-align: left !important;
  }
  td:first-child {
    width: 150px;
  }

  // show/hide the copy button
  tr a:nth-child(2) {
    margin-left: 16px;
    display: none;
  }
  tr:hover a:nth-child(2) {
    display: inline-block;
  }
}


.spacer {
  width: 1px;
  height: 32px;
}

.prime {
  position: absolute;
  right: 16px;
  font-style: italic;
  color: var(--prime-hover);
}
